<template>
    <div class="app-container">
        <el-row>
            <el-col :span=" 24 " class="card-box">
                <el-card>
                    <searchForm @handleChange="handleChange" @init=" init " :searchData=" searchData " :searchItem=" searchItem "></searchForm>
                </el-card>
            </el-col>
            <el-col :span=" 24 " class="card-box">
                <el-card>
                    <my-table :columns=" columns " :showIndex=" true " :data=" tableData " :loading=" table_loading "
                        :pagination=" pagination " :cellStyle=" { padding: '6px 0' } " @currentChange=" currentChange "
                        @handleSizeChange=" handleSizeChange ">
                        <template #isReply=" slotProps ">
                            <el-text class="mx-1" v-if="slotProps.callback.row.isReply == 0">未回复</el-text>
                            <el-text class="mx-1" type="primary"
                                v-if="slotProps.callback.row.isReply == 1">已回复</el-text>
                        </template>
                        <template #redDot=" slotProps ">
                            <el-text class="mx-1" v-if="slotProps.callback.row.redDot == 0">未读</el-text>
                            <el-text class="mx-1" type="primary" v-if="slotProps.callback.row.redDot == 1">已读</el-text>
                        </template>
                        <template #feedbackDetail=" slotProps ">
                            <el-tooltip class="box-item" effect="dark" placement="top-start">
                                <template #content>
                                    <div class="tooltip-contnet">{{ slotProps.callback.row.feedbackDetail }}</div>
                                </template>
                                <div class="text-ellipsis">{{ slotProps.callback.row.feedbackDetail }}</div>
                            </el-tooltip>
                        </template>
                        <template #operation=" slotProps ">
                            <el-button link type="primary" size="small"
                                @click="handleEdit(slotProps.callback.row)">回复</el-button>
                        </template>
                    </my-table>
                </el-card>
                <el-dialog :title=" dialogForm.title " v-model=" dialogForm.dialogVisible " :destroy-on-close=" true "
                    :close-on-click-modal=" false " top="5%" width="500px">
                    <div>
                        <form-page v-model:refObj=" formInfo.formRef " :data=" formInfo.data "
                            :field-list=" formInfo.fieldList " :rules=" formInfo.rules "
                            :label-width=" formInfo.labelWidth " :list-type-info=" listTypeInfo ">
                            <template v-slot:form-item-firmwareUrl>
                                <FileUpload v-model:modelValue=" data.firmwareUrl " :limit=" 1 " :fileSize=" 10 "
                                    :fileType=" ['zip', 'bin', 'fw'] "></FileUpload>
                            </template>
                        </form-page>
                    </div>
                    <template #footer>
                        <span>
                            <el-button size="small" @click="dialogForm.dialogVisible = false">取消</el-button>
                            <el-button size="small" type="primary" @click=" handleSubmit ">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="productPackage">
import myTable from "@/components/common/table.vue"
import searchForm from "@/components/common/searchForm.vue"
import FileUpload from "@/components/FileUpload/index.vue"
import formPage from "@/components/common/formPage.vue"
import { findFeedbackDetail, findFeedbackList, feedbackReply, findFeedbackType } from "@/api/api";
import initRules from '@/utils/initRules'
import { mergeObjOfValue, deepClone } from '@/utils/index'
import { getTableData } from '@/mixins/mixins';
import { nextTick, onMounted, toRefs } from "vue";
const { proxy } = getCurrentInstance();
const columns = ref([

    {
        label: "ID",
        prop: "id"
    },

    {
        label: "用户id",
        prop: "userId"
    },
    {
        label: "反馈类型",
        prop: "feedbackType"
    },
    {
        label: "反馈板块",
        prop: "feedbackModule"
    },
    {
        label: "是否回复", // 0:未回复,1:已经回复
        prop: "isReply",
        slot: "isReply"
    },
    {
        label: "是否已读", // 0:未读,1:已读
        prop: "redDot",
        slot: "redDot"
    },

    {
        label: "反馈时间",
        prop: "createTime",
        time: true
    },
    {
        label: "反馈内容",
        prop: "feedbackDetail",
        slot: "feedbackDetail"
    },
    {
        label: "操作",
        prop: "",
        width: 120,
        align: "left",
        slot: "operation"
    }
])
const searchItem = ref([])
const searchData = ref({
    userId: "",
    startTime: "",
    endTime: "",
    isReply: "",
    moduleId: "",
    redDot: "",
    typeId: "",
})
const feedbackTypeObj = ref({})
const feedbackTypeColumns = ref([])
const feedbackModuleColumns = ref([])
const dialogForm = ref({
    dialogVisible: false,
    title: '新增'
})
const formInfoData = {
    id: null,
    content: "",
}
const listTypeInfo = ref({
    upgradeWayList: [
        { label: '强制升级', value: '1' },
        { label: '非强制升级', value: '0' }
    ]
})
const formInfo = reactive({
    formRef: null,
    data: formInfoData,
    fieldList: [
        { label: '回复内容', value: 'content', type: 'textarea', required: true },
    ],
    rules: {},
    labelWidth: '110px'
})
const { data, fieldList, rules, formRef } = toRefs(formInfo)
//hook
const {
    tableData,
    pagination,
    table_loading,
    init,
    handleSizeChange,
    currentChange,
} = getTableData(findFeedbackList)
function handleChange (value){
    if (value == 'typeId') {
        feedbackModuleColumns.vlaue = feedbackTypeObj.value[searchData.value.typeId]
        handleSearchItem()
    }
    if (!searchData.value.typeId) {
        searchData.value.moduleId = ''
    }
}
// 生成表单验证
function handleInitRules () {
    rules.value = initRules(fieldList.value)
}
async function getFindFeedbackType () {
    await findFeedbackType().then((res) => {
        let arr = []
        let obj = {}
        res.data.forEach((item, index) => {
            if (!item.parentId) {
                obj[item.id] = []
                arr.push(
                    {
                        id: item.id,
                        value: item.typeName
                    }
                )
            }
        })
        res.data.forEach((item, index) => {
            if (item.parentId) {
                obj[item.parentId].push({
                    id: item.id,
                    value: item.moduleName
                })
            }

        })
        feedbackTypeObj.value = obj
        feedbackTypeColumns.value=arr
    }).catch((err) => {
    })
}
// 回复
function handleEdit (rowData) {
    mergeObjOfValue(data.value, rowData)
    data.value.content = ''
    dialogForm.value.title = '回复'
    dialogForm.value.dialogVisible = true
}

// 提交
function handleSubmit () {
    formRef.value.validate(valid => {
        if (valid) {
            feedbackReply(data.value).then(res => {
                proxy.$modal.msgSuccess("提交成功");
                dialogForm.value.dialogVisible = false
                init(searchData.value)
            }).finally(() => {
            })
        }
    });
}
function handleSearchItem() {
    searchItem.value = [
            {
                type: "input",
                label: "小程序用户id",
                prop: "userId",
                placeholder: "请填写小程序用户id"
            },
            {
                type: "select",
                label: "是否回复",
                prop: "isReply",
                selectList: [
                    { id: 0, value: '未回复' },
                    { id: 1, value: '已回复' },
                ],
            },
            {
                type: "select",
                label: "是否已读",
                prop: "redDot",
                selectList: [
                    { id: 0, value: '未读' },
                    { id: 1, value: '已读' },
    
                ],
            },
            {
                type: "select",
                label: "反馈类型",
                prop: "typeId",
                selectList: feedbackTypeColumns.value,
            },
            {
                type: "select",
                label: "反馈模块",
                prop: "moduleId",
                selectList: feedbackModuleColumns.vlaue,
            },
            {
                type: "daterange",
                dateType: 'datetime',
                label: "时间",
                timeFormat: "YYYY-MM-DD HH:mm:ss",
                timeList: ["startTime", "endTime"]
            },
        ]
}
onMounted(async() => {
    data.value = deepClone(formInfoData)
    handleInitRules()
    init()
    await getFindFeedbackType()
    handleSearchItem()
})
</script>
<style lang="scss" scoped>
.text-ellipsis {
    white-space: nowrap;
    /* 文本不换行 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
}

.tooltip-contnet {
    width: 200px;
}
</style>
